<!-- 首页 -->
<template>
	<view class="">
		<view class="subsection">
			<view class="subsection-item" v-for="(item,index) in list" :key="index" :class="{'active':current===index}"
				@click="handleChange(item,index)" :style="{'width':width+'rpx'}">
				<text>{{item.label}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		props: {
			value: {
				type: [String, Number]
			},
			list: {
				type: Array,
				default: () => []
			},
			width: {
				type: String,
				default: '144'
			}
		},
		watch: {
			value: {
				immediate: true,
				handler(val) {

					if (val !== '' && this.list.length) {
						this.current = this.list.findIndex(item => item.value == val)
					} else {
						this.current = 0
						this.$emit('input', 0)
					}
				}
			}
		},
		data() {
			return {
				current: 0
			}
		},
		methods: {
			handleChange(select, index) {
				this.$emit('input', select?.value ?? 0)
				this.$emit('change', select)

			}
		}
	}
</script>

<style scoped lang="scss">
	.subsection {
		// width: 296rpx;
		height: 64rpx;
		background-color: #fff;
		border-radius: 36rpx;
		padding: 4rpx;
		box-sizing: border-box;
		display: flex;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

		.subsection-item {
			height: 56rpx;
			border-radius: 36rpx;
			font-weight: 600;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.active {
			background-color: #FE3F59;
			color: #fff;
		}
	}
</style>